<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>奇妙导播台</title>
    <meta charset="utf-8">
    <!--<script charset="utf-8" type="text/javascript" src="./js/director/init.js?v=2014122229711"></script>-->
    <script charset="utf-8" type="text/javascript" src="./js/init.js?v=2014122229711"></script>
    <script charset="utf-8" type="text/javascript"
            src="js/qui_0.4.0/jquery.ui.autocomplete.js?v=2014122229711"></script>
    <script charset="utf-8" type="text/javascript"
            src="js/qui_0.4.0/jquery.qui.autocomplete.js?v=2014122229711"></script>
    <script charset="utf-8" type="text/javascript" src="js/qui_0.4.0/jquery.qui.suggest.js?v=2014122229711"></script>
    <style>
        #countTimer span {
            color: red;
        }

        #countTimer span.time-zone {
            margin: 0px 5px;
            padding: 5px;
            background: #dddddd;
        }

        div#base_info_container > p {
            margin: 25px 0px;
            font-size: large;
        }

        #countTimer {
            clear: both;
            font-size: 18px;
            margin-left: 30px
        }

        .time-green {
            color: green;
        }

        .time-red {
            color: red
        }

        #director_detail {
            font-size: 16px;
            margin-top: 20px;
            padding: 10px;
            margin-left: 30px
        }

        #director_detail > div {
            padding-top: 7px;
        }

    </style>
</head>
<body>
<header></header>
<div class="container-fluid"></div>
<div class="row-fluid"></div>
<div class="row">
    <div style="width: 592px;float: left">
        <div id="flv" style="width:592px;height:333px;background-color:black;color:white;"></div>
    </div>
    <div style="width:480px;float:left">
        <button class="btn btn-large" type="button" style="position: relative;float:right">输出设置</button>
        <div id="countTimer">
            <span name="countTimerHint" style="margin-right: 20px;">倒计时</span>

            <div name="countTimerShow" style="display: inline"></div>
        </div>
        <div id="director_detail">
            <div>节目名称：<span name="span_program_name">张碧晨演唱会</span></div>
            <div>节目ID：<span name="span_program_id">232323232</span></div>
            <div>直播开始时间：<span name="span_start_play_time">2017-09-11 12:12:12</span></div>
            <div>直播结束时间：<span name="span_stop_play_time">2017-09-11 12:12:12</span></div>
            <div>直播延时：<span name="span_delay">10</span>s<a href="#" style="margin-left: 20px;">预览</a></div>
            <div>输出地址：<span name="span_output_url">rtmp://10.10.10.1/live/aaa</span></div>
        </div>
        <button name="changeBtn" class="btn btn-orange btn-large" type="button"
                style="margin-left: 30px;margin-top: 10px" data-key="exchange">切换灾备
        </button>
        <div style="color: #808080 ;font-size: 16px;margin-left: 30px">快速切换灾备并清空延时</div>
    </div>
</div>


<div id="navDiv" class="container">

</div>
<div id="dlg_preview">

</div>
<div id="dlg_settings">
    <div class="form-horizontal">
        <div class="control-group"><label class="control-label">输出地址：</label><input type="text" name="input_out_url"
                                                                                    style="width:200px;"></div>
        <div class="control-group"><label class="control-label">最高清晰度：</label>
            <select name="stream_type">
            <option value="1">高清</option>
            <option value="2">超清720P</option>
            <option value="3">1080P</option>
        </select></div>
        <div class="control-group"><label class="control-label">延迟时间：</label><input type="text" style="width: 40px"
                                                                                    onkeyup="this.value=this.value.replace(/\D/g,'')"
                                                                                    onafterpaste="this.value=this.value.replace(/\D/g,'')">S
        </div>
        <div class="control-group"><label class="control-label"></label>节目延迟时间=导播台延迟+频道延迟</div>
    </div>
</div>
<div id="dlg_add_alternatePlay">
    <div class="form-horizontal">
        <div class="control-group"><label class="control-label">名称：</label><input type="text" placeholder=""></div>
        <div class="control-group"><label class="control-label">信号源：</label><input type="text" placeholder=""></div>
        <div class="control-group"><label class="control-label"></label><input type="checkbox" name="default_play">设为默认灾备视频
        </div>
    </div>
</div>
<div id="dlg_add_signal">
    <div class="form-horizontal">
        <div class="control-group"><label class="control-label">类型：</label><select name="signal_type">
            <option value="0">直播</option>
            <option value="1">点播</option>
            <option value="2">流地址</option>
        </select></div>
        <div class="control-group"><label class="control-label">名称：</label><input type="text"></div>
        <div class="control-group"><label class="control-label">信号源：</label><input type="text"></div>
        <div class="control-group"><label class="control-label">预览地址：</label><input type="text"></div>
    </div>
</div>
<script type="text/javascript">
    require(['epg'], function () {
        Director.Action.run();
    })
</script>
</body>
</html>